<template>
  <view class="page-wrapper page-space">
    <navigator class="demo-navigator" url="/demo/auth/mustLogin"><button>进入需登录的页面</button></navigator>
    <navigator class="demo-navigator" url="/demo/auth/mustSuperAdministrator"><button>进入需超级管理员的页面</button></navigator>
    <navigator class="demo-navigator" url="/demo/auth/hasusertype"><button>进入需指定用户类型的页面</button></navigator>
    <navigator class="demo-navigator" url="/demo/auth/hasrole"><button>进入需指定角色的页面</button></navigator>
    <navigator class="demo-navigator" url="/demo/auth/hasperimit"><button>进入需指定权限的页面</button></navigator>

    <navigator v-if="isLogin" class="demo-navigator" url="/demo/auth/mustLogin">
      <button>进入需登录的页面【权限控制】</button>
    </navigator>
    <navigator v-if="isSuperAdministrator" class="demo-navigator" url="/demo/auth/mustSuperAdministrator">
      <button>进入需超级管理员的页面【权限控制】</button>
    </navigator>
    <navigator v-if="hasUserType(0, 1)" class="demo-navigator" url="/demo/auth/hasusertype">
      <button>进入需指定用户类型的页面【权限控制】</button>
    </navigator>
    <navigator v-if="hasRole('admin', 'dev')" class="demo-navigator" url="/demo/auth/hasrole">
      <button>进入需指定角色的页面【权限控制】</button>
    </navigator>
    <navigator v-if="hasPermit('create', 'update')" class="demo-navigator" url="/demo/auth/hasperimit">
      <button>进入需指定权限的页面【权限控制】</button>
    </navigator>

    <navigator v-if="hasPermit('create')" class="demo-navigator" url="/demo/auth/edit"><button>新增</button></navigator>
    <navigator v-if="hasPermit('update')" class="demo-navigator" url="/demo/auth/edit"><button>更新</button></navigator>
    <button v-if="hasPermit('remove')" class="demo-navigator">删除</button>
    <button v-if="hasPermit('removesssss')" class="demo-navigator">有权限时可以看见我</button>

    <view class="demo-code">
      <view>{{ `<view v-if="isLogin">登录可见</view>` }}</view>
      <view>{{ `<view v-if="hasUserType(0)">指定用户类型</view>` }}</view>
      <view>{{ `<view v-if="hasRole('admin')">指定角色</view>` }}</view>
      <view>{{ `<view v-if="hasPermit('create')">指定权限</view>` }}</view>
      <view>{{ `<view v-if="isSuperAdministrator">超级管理员可见</view>` }}</view>
    </view>

    <view class="demo-code" style="margin-top: 12px">
      <view>const isLogin = useIsLogin();</view>
      <view>const hasUserType = useHasUserType();</view>
      <view>const hasRole = useHasRole();</view>
      <view>const hasPermit = useHasPermit('/auth/user/');</view>
      <view>const isSuperAdministrator = useIsSuperAdministrator();</view>
    </view>

  </view>
</template>

<script setup lang="ts">
import {useHasPermit, useHasRole, useHasUserType, useIsLogin, useIsSuperAdministrator} from "@/store/account";

const isLogin = useIsLogin();
const isSuperAdministrator = useIsSuperAdministrator();
const hasUserType = useHasUserType();
const hasRole = useHasRole();
const hasPermit = useHasPermit('/auth/user/');

</script>

<style lang="scss">
@import "../index.css";
</style>
